import React from 'react'
import allSrcNative from "../../../../res/images/web/game/地球-黑@2x.png";
import allSrcActive from "../../../../res/images/web/game/地球-白@2x.png";
import hotSrcActive from "../../../../res/images/web/game/奖杯-白@2x.png";
import hotSrcNative from "../../../../res/images/web/game/奖杯-黑@2x.png";
import './HotGameButton.css'

class HotGameButton extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            folded: true,
        }
    }

    setHot = (value) => {
        this.props.setHot(value)
    }

    fold = () => {
        if (this.state.folded) {
            this.setState({
                folded: false,
            })
            setTimeout(() => {
                this.setState({
                    folded: true,
                })
            }, 2000)
        } else {
            return
        }
    }

    render() {
        const hot = this.props.hot
        const folded = this.state.folded
        let optionCls = 'flex-center-align-center flex-1 hot-game-button-option'
        let optionActiveCls = optionCls + ' hot-game-button-active'
        const unfoldedTemplate = <>
            <div className={hot ? optionCls : optionActiveCls} onClick={() => this.setHot(false)}>
                <img src={hot ? allSrcNative : allSrcActive} alt="" className='hot-game-button-icon' />
                <span>全部</span>
            </div>
            <div className={hot ? optionActiveCls : optionCls} onClick={() => this.setHot(true)}>
                <img src={hot ? hotSrcActive : hotSrcNative} alt="" className='hot-game-button-icon' />
                <span>重要</span>
            </div>
        </>
        const foldedTemplate = <div
            className='hot-game-button-option hot-game-button-active'
            style={{width: '138px'}}
        >
            <img src={hot ? hotSrcActive : allSrcActive} alt='' className='hot-game-button-icon hot-game-button-folded-icon'/>
        </div>
        const hotButton = <div
            className='hot-game-button flex'
            style={{
                transform: `translateX(${folded ? '96px' : '0px'})`,
                transition: 'transform 0.5s',
            }}
            onClick={this.fold}
        >
            {folded ? foldedTemplate : unfoldedTemplate}
        </div>
        return hotButton
    }
}

export default HotGameButton